<template>
  <div>
    <el-table :data="tableList2" border style="margin:20px auto;width:92%">
      <el-table-column type="index" label="序号" width="50"></el-table-column>
      <el-table-column prop="hash.worgid" label="部门ID"></el-table-column>
      <el-table-column prop="hash.worgname" label="部门"></el-table-column>
      <el-table-column prop="hash.uname" label="姓名"></el-table-column>
      <el-table-column prop="hash.wdate" label="日期"></el-table-column>
      <el-table-column prop="hash.uid" label="职工编号"></el-table-column>
      <el-table-column label="发布状态" v-if="$route.path=='/wage/manage'">
        <template slot-scope="scope">
          <span v-if="scope.row.hash.wstatus=='1'">已发布</span>
          <span v-else style="color:#f60">未发布</span>
        </template>
      </el-table-column>

      <el-table-column
        v-for="(item, index) in headList"
        :key="index"
        :prop="'hash.'+item"
        :label="item"
      ></el-table-column>
    </el-table>
    <el-pagination
      style="text-align:center"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :currentPage="index"
      :pageSizes="[10, 20, 30, 40, 50]"
      :pageSize="size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableCopyTableList.length"
    ></el-pagination>
  </div>
</template>
<script>
export default {
  props: {
    tableList: {
      type: Array,
      required: true,
    },
    headList: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      tableList2: [],
      tableCopyTableList: [],
      index: 1,
      size: 10,
    };
  },
  methods: {
    // 页数改变事件
    handleSizeChange(size) {
      this.size = size;
      this.tableList2 = this.paging(size, this.index);
    },
    // 页码改变事件
    handleCurrentChange(current) {
      this.index = current;
      this.tableList2 = this.paging(this.size, current);
    },
    // 本地分页的方法
    paging(size, current) {
      const tableList = this.tableCopyTableList.slice();
      const tablePush = [];

      console.log('paging.size', size);
      console.log('paging.current', current);

      tableList.forEach((item, index) => {
        if (size * (current - 1) <= index && index <= size * current - 1) {
          tablePush.push(item);
        }
      });
      console.log('tablePush', tablePush);

      return tablePush;
    },
  },

  created() {
    this.tableList2 = this.tableList.slice();
  },
  mounted() {
    if (this.tableList.length > 0) {
      this.tableCopyTableList = this.tableList2.slice();
      this.tableList2 = this.paging(this.size, this.index);
    }
  },
};
</script>

